Framer Web 发布后，终于像个正经的设计软件了。
Framer 自从创立以来，始终处于不温不火的状态，经过这么多年的发展，定位依然很尴尬，设计师用不来，工程师更不屑于用。从最早的 Framer Classic 到后来震惊业界的 Framer X，虽然产品理念很先进，产品设计很出色，却始终都是小众人群的玩具而已。这一点他们自己心里肯定也是心知肚明的。而每次新版发布上线，简直可以用下面这句话来形容：
新品发布一时爽，使用体验火葬场，社交网络人人吹，一提付费就拉黑。。。
经过一年的改进和迭代，Framer Web 正式上线，新版界面也做了很大的调整，可以看到和一年前的 Framer X 有了很大的变化。
Interface
如果你看过去年我们组团去荷兰参加 Framer Loupe 设计大会的文章应该还记得，当时 Framer Web 内测的时候，界面还沿用了 Framer X 以前的界面，导航在左侧，组件商店还是独立的页面，还有画图工具等等。
而这次全新的大改版主要包括以下这些改进：
1.工具栏从左侧移到到上面，取消了很难用的二级导航。2.图层面板常驻在左侧，更符合大众的使用习惯。3.弱化了Coding 和 Graphic 画图的功能，更专注于交互设计，对设计师更友好了。4.取消了 Store 页面，采用更加方便的 Insert 弹窗快速查找组件。5.增加了 Handoff 功能，支持导出图片和代码。6.Framer Classic 就有的动效可视化操作面板又回来了，终于不用写代码做设计了。
工具栏的全新设计和动画切换效果做得非常棒，产品逻辑也更清晰，想必 Framer 从 Figma 的产品设计上学到了很多，两者的使用体验也非常接近了。甚至很多国外设计师都希望 Figma 能拥有和 Framer 一样精致的界面了。
Insert Menu
Insert 其实就是一个全局搜索功能，这个新功能我个人非常喜欢，它把很多历史遗留的产品逻辑问题通过一个弹窗就解决了。
Insert Menu 主要包括 6 大类内容：
1.Frames：一些常用的布局和画布，比如各种手机的尺寸。2.Interactions：可以看作是常用交互动作的快捷方式。通常如果想做一个 Scroll、Page 等交互，需要新建几个画布，链接起来，在工具栏点击相应功能，而通过插入 Interactions 的快捷方式一步就可以完成了。3.Default Components：官方内置的一套基础组件，包括最常用的按钮、图标、输入框、GIF 图等等。4.Project Components：当前项目里定义的组件。取消了原先左侧需要切换导航栏才能找到的组件菜单。5.Team Packages：团队发布的组件库。6.Public Packages：公开发布的组件库。这两个就是之前 Store 里的内容。
Framer X 刚推出的时候引入的 Store 功能，用户可以提交自己制作的组件和设计系统，所有用户都可以在 Store 搜索并下载自己需要的组件。各大公司设计团队也都上线了自己的组件库（当然可能不全是他们自己做的，应该是 Framer 官方帮忙做好用来 PR 的），如果未来上线付费功能，Store 的想象力非常大。
但是原先 Store 界面的交互逻辑，查找、安装、使用流程都很麻烦，需要在软件里跳来跳去，这次统一整合在一个全局搜索弹窗里，省去了很多繁琐的步骤，让你可以更加专注设计本身。
Magic Motion
React 平台曾经有一个很流行的开源动效框架 PopMotion，后来被 Framer 收购变成了 Framer Motion 并内置在 Framer X 成为了官方的动效框架。而这次的 Magic Motion 也是来自于最新版 Framer Motion。
Magic Motion 的意思就是，在做 Transition 动画过渡时，同时在过渡源和目标上同时存在的图层将会通过动画效果，应用新的图层样式和新的位置。有点像现在网站设计上常见的 SVG 过渡动画。有了这个功能，任何两个元素之间的动画过渡都可以自动切换而无需复杂的操作了。
对于设计师，仅需要用 Framer 提供的 Transition 可视化面板设置动画参数，不再需要写复杂的逻辑代码就能实现这些效果。而对于前端工程师，如果想实现更复杂的交互效果，也可以直接在项目中使用开源免费的 Framer Motion。
Coding
代码部分一直是 Framer 最核心的功能，区别于其他交互软件最大的亮点，但同时也是最让人诟病从而放弃 Framer 的最大原因。在以前的版本中，如果你想实现一个非常简单的交互逻辑，需要手写很多基础代码，需要学习 React 语法，对设计师非常不友好，而对于工程师来说又不能完全复用这里的代码，更不屑于用一个设计工具里实现的代码。
想必 Framer 团队也早就意识到为什么留不住用户了，所以在这次的全新大改版中，从产品设计的角度大大弱化了代码的重要性，甚至新建项目后默认都不显示 Code 面板了。虽然你还是可以像以前一样新建 code 组件，手写代码，制作更高级的交互效果，但对于绝大部分设计师来说，已经无需再特别关注代码的部分，通过图形界面和属性面板，以及官方内置的丰富组件和快捷交互功能，完全可以做出动效比较丰富的交互设计了。
内置的代码编辑器其实就是 VS Code 魔改的版本，Framer 自己做了一套代码高亮主题，优化了主界面和提示窗口的视觉设计。
和 VS Code 一致，选中关键字也可以显示相关文档。所以不要把内置的代码编辑器想象的很简陋。
要是 Framer 能把这套魔改的界面提出来放到 VS Code 插件市场就好了，目前仅有语法的主题可以下载。
Handoff
原先的导出功能升级变成了最新的 Handoff，功能上没什么大的变化，和大部分同类设计工具的逻辑基本一致。
对于页面元素，除了可以导出 CSS、SVG 外，还支持 JSX 格式，不过 JSX 导出比较鸡肋没什么用。而对于包含了 Transitions 过渡动画的图层，还可以导出 Framer Motion 或 Swift 的代码。
有一个小细节需要注意，只有使用 Graphic 画图功能制作的矢量元素才有 SVG 代码导出的选项，默认情况则是 CSS 代码导出。
而最常用的导出图片功能，目前仅支持在桌面版 App 上使用， Web 版还在开发中。
Pricing
最近硅谷很多明星产品都开始采用产品免费的定价策略了，不知道是不是都借鉴了 Figma 的思路。比如 Basecamp，Notion，如今 Framer 也正式推出了免费版。
这样的定价也确实更合理，当一家初创公司尤其是工具型产品，没有投资和大量资金，也没有太多付费企业用户的时候，不敢提供免费的版本。而发展中期有了投资和企业用户后，开放免费的套餐，靠付费用户养活公司和盈利，又能靠免费用户提高付费转化率。
虽然 Framer 提供了免费版本，但只有 Pro 版本才能使用桌面端 App，而桌面端的好处是可以创建 folder-backed 项目，也就是后缀为 .framerfx 的可以使用 Git 进行版本管理的项目。所以当一个团队真的想选择 Framer 作为交互工具的话，通常只有选择 Pro 以上版本才行。对比之前的定价，其实这个策略甚至是变相涨价了。不过对于大部分普通用户来说，提供 2 个编辑者的免费版已经足够用了。
不足之处
此 Web 不是你想象的那样
在设计软件集体 Web 化的背景下， 虽然 Framer 的 Web 版也可以更好的多人协作，但仔细使用后发现这个 Web 的逻辑和 Figma 非常不同。Web 版和桌面版目前并不能无缝同步，Web 到桌面需要下载后打开，而桌面到 Web 因为桌面版支持的格式不同也需要导入……所以说这其实是两个不同的产品，希望未来官方可以彻底打通两个平台吧。
从设计到生产端代码依然无法打通
尽管新版本的 Framer 已经可以通过可视化界面定制动画参数，并且还可以导出对应的代码，但这个导出效果其实并不是太理想，目前只能导出 Transiton 的参数而已。
比如在前端项目中，Framer Motion 这个 React 框架是一个非常好的选择，但我不想每次都手写这些代码，我希望可以在软件中调试好，直接生成可以直接用的代码。但由于软件中的动效并不支持导出复合的参数，所以想要导出真正的生产端代码依然不现实。
动效功能还有待完善
目前 Framer 的动效功能虽然也能实现比较复杂的效果，但要想完成可定制性很强的交互，还是只能通过代码和 Framer Motion 的 API 来实现，可视化操作的部分只能实现一些常用的官方定义好的动效，和 ProtoPie 之类的竞品比还很弱，更像是 Figma 里的那个 Prototyping 功能。
有些地方，甚至还不如 Figma 自带的 Prototyping……比如下图 Modal 弹窗动画，Figma 可以指定 Modal 的具体位置，这样就可以把它放到元素的下方做成一个下拉菜单的效果。而同样的效果 Framer 的 Modal 竟然只能默认全局居中显示。
最后总结
在 Web 版发布前夕，Framer 就在社交网络上高调宣布支持 Figma 导入了，Figma 官方也积极转发和支持。有意思的是，不知道有多少人还记得几年前 Framer 也曾经高调宣布支持导入 Sketch，双方当时还是友好的合作关系，荷兰的两个哥俩，你做 UI 软件，我做交互软件，简直完美。谁知好景不长， Framer 做着做着发现自己也能做 UI 啊，于是听相声的突然上台起义自己说相声了，之后荷兰哥俩就再也没有互动过……
而这次产品策略的调整，大概也说明了 Framer 放弃了想攻占 UI 设计领域的尝试，官网的 “Framer is for the beginner” 也暗示他们放弃了之前 Coding 至上的小众 Geek 产品定位，不如专心做好更适合广大设计师容易上手使用的交互和动效设计软件，剩下的交给 Figma 就得了。
本文作者：丁一
转载请点击原文向作者获取授权，并注明作者、出处和链接。
更多精彩文章
Mac 上那些超好用的小工具